<template>
  <div class="login-container d-flex jc-center ai-center">
    <el-card header="郑州市惠济区村（居）务监督平台" class="login-card fs-h1">
      <el-form
        ref="form"
        @submit.native.prevent="login"
        label-width="4rem"
        class="d-flex flex-column w-10 p-2 pt-0 demo-ruleForm"
      >
        <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
          <label for="date" class="el-form-item__label" style="width: 4rem;">用户名</label>
          <div class="el-form-item__content">
            <el-input v-model="model.mAccountnumber" clearable></el-input>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
          <label for="date" class="el-form-item__label" style="width: 4rem;">密码</label>
          <div class="el-form-item__content">
            <el-input type="password" v-model="model.mPassword" clearable></el-input>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
          <label for="date" class="el-form-item__label" style="width: 4rem;">权限</label>
          <div class="el-form-item__content">
            <el-select v-model="model.mType" placeholder="请选择管理员类型" clearable>
              <el-option
                v-for="(item, index) in [{label:'区级管理员', value: 2},{label:'镇(街道)级管理员', value: 4},{label:'村级管理员', value: 5}]"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start"></div>
        <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
          <label for="date" class="el-form-item__label" style="width: 4rem;"></label>
          <div class="el-form-item__content">
            <el-button type="primary" native-type="submit" style="width: 10rem;">登录</el-button>
          </div>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // model: {},
      model: {
        mAccountnumber: "",
        mPassword: "",
        mType: ""
      }
    };
  },
  methods: {
    async login() {
      const res = await this.$http.post(
        "h/login",
        this.Qs.stringify(this.model)
      );
      if (res.status == 200) {
        this.$util.handleLocalStorage("set", "admin", res.data.data);
        const resData = res.data.data;
        if (typeof resData === "object" && res.data.state === "success") {
          this.$message({
            type: "success",
            message: `欢迎你 ${resData.mName}`
          });
          // window.location.href = "http://www.huitengit.com/admin/"
          this.$router.push("/");
        } else {
          this.$message({
            type: "error",
            message: resData
          });
        }
      } else if (!res.status == 500) {
        this.$message.error("所填信息有误！！");
      }
    }
  }
};
</script>

<style>
.login-card {
  width: 25rem;
  margin: auto;
  background: rgba(247, 244, 244, 0.3);
}
.login-container {
  width: 100%;
  height: 100%;
  background: url(../assets/background.jpg) no-repeat;
  background-size: cover;
}
.login-card .el-input__inner {
  background: rgba(255, 255, 255, 0.3) !important;
}
</style>
